<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<ol>
			<li>手机名 xxxx</li>
			<li>内存容量 xxxx</li>
			<li>key value</li>
			<li>key value</li>
			<li>key value</li>
		</ol>
	</body>

</html>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
	const view = {
		init() {
			this.getDetail();
		},

		render(data) {
			let htmlStr = '';
			for(let p in data) {
				htmlStr += `<li>${p}  ->  ${data[p]}</li>`;
			}
			$('ol').html(htmlStr);
		},

		getPhoneList() {
			let status = new Promise((resolve, reject) => {
				let url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/phoneList';
				let data = {};
				$.ajax({
					url,
					type: "get",
					data,
					success: (res) => {
						resolve(res);
					},
					error: (err) => {
						reject(err);
					}
				});
			});
			
			return status;
		},
		

		// async+promise把异步变同步
		async getDetail() {
			// 等待数据回来再进行操作
			let status = await this.getPhoneList();
			// 获取id
			let id = status.data.list[0].id;
			let url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/getDetail';
			let data = {
				id,
			};
			$.ajax({
				type: "get",
				url,
				data,
				success: (res) => {
					this.render(res.data);
				},
				error: (err) => {
					console.log(err);
				}
			});
		}

	}

	view.init();
</script>

